<template>
  <view class="collapse-box">
    <!-- 标题 -->
    <view class="collapse-title" @click="handleClick">
      <view class="collapse-title-text" :style="props.titleStyle">
        <up-icon :name="isOpen ? 'arrow-down-fill' : 'play-right-fill'" size="24rpx"></up-icon>
        <text>{{ props.title }}</text>
      </view>
      <view class="more" v-if="props.value">
        <text>{{ props.value }}</text>
      </view>
    </view>
    <view class="collapse-content" v-if="isOpen">
      <slot></slot>
    </view>
    <u-divider v-if="props.border"></u-divider>
  </view>
</template>
<script setup>
import { ref } from 'vue';

const props = defineProps({
  data: {
    type: Array,
    default: () => []
  },
  title: {
    type: String,
    default: ''
  },
  titleStyle: {
    type: Object,
    default: () => { }
  },
  value: {
    type: String,
    default: ''
  },
  valueStyle: {
    type: Object,
    default: () => { }
  },
  border: {
    type: Boolean,
    default: false
  }
})

const isOpen = ref(false);
const handleClick = (item) => {
  isOpen.value = !isOpen.value;
}
</script>
<style lang="scss" scoped>
.collapse-box {
  border-radius: 10rpx;
  background-color: #fff;
}

.collapse-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10rpx;

  .collapse-title-text {
    display: flex;
    align-items: center;
    gap: 10rpx;
    font-size: 28rpx;
    color: #333;
    font-weight: bold
  }
}

.collapse-content {
  transition: all 0.3s ease-in-out;
}

.more {
  display: flex;
  align-items: center;
  gap: 10rpx;
  font-size: 24rpx;
  color: #9FA2A7;
}
</style>